<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
      <el-form-item label="日期范围：">
        <el-date-picker
          v-model="rangeTime"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <el-button @click="search()">查询</el-button>
        <el-button type='primary' @click="download()" :loading="downloading">下载</el-button>
      </el-form-item>
    </el-form>
    <div style="margin: 20px;">检索结果总览：分享人数/分享次数：{{ShareStatisticsVo.wxShareUv}} / {{ShareStatisticsVo.wxSharePv}}   分享页uv/pv：{{ShareStatisticsVo.wxSharePaperUv}}/{{ShareStatisticsVo.wxSharePaperPv}}
      书籍试听人数：{{ShareStatisticsVo.bookAuditionNum}}  跳转下载人数：{{ShareStatisticsVo.wxJumpDownloadPaperNum}}
      支付成功人数：{{ShareStatisticsVo.payNum}}   支付转化率：{{ShareStatisticsVo.memberRegisNumConversion}}</div>
    <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
      <el-table-column prop="statTime" header-align="center" align="center" label="日期"></el-table-column>
      <el-table-column prop="memberTime" header-align="center" align="center" label="分享人数/分享次数">
        <template slot-scope="scope">
          {{scope.row.wxShareUv}} / {{scope.row.wxSharePv}}
        </template>
      </el-table-column>
      <el-table-column prop="gradeName" header-align="center" align="center" label="分享页UV/PV">
        <template slot-scope="scope">
          {{scope.row.wxSharePaperUv}} / {{scope.row.wxSharePaperPv}}
        </template>
      </el-table-column>
      <el-table-column prop="payNum" header-align="center" align="center" label="支付成功人数"></el-table-column>
      <el-table-column prop="bookAuditionNum" header-align="center" align="center" label="书籍试听人数"></el-table-column>
      <el-table-column prop="wxJumpDownloadPaperNum" header-align="center" align="center" label="跳转下载人数"></el-table-column>
      <el-table-column prop="memberRegisNumConversion" header-align="center" align="center" label="支付转化率"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        ShareStatisticsVo: {},
        rangeTime: '',
        downloading: false,
        dataForm: {},
        dataList: [],
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '本月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setDate(1);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '上个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              const nowMonth = start.getMonth()
              const nowYear = start.getFullYear()
              // 判断是否为1月的情况，需要设置去年
              if(nowMonth === 0) {
                start.setMonth(11)
                start.setFullYear(nowYear-1)
              } else {
                start.setMonth(start.getMonth()-1)
              }
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      };
    },
    mounted() {
      this.getDataList();
    },
    methods: {
      search() {
        this.pageIndex = 1
        this.getDataList()
      },
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true;
        this.dataForm.page = this.pageIndex
        this.dataForm.limit = this.pageSize
        this.dataForm.shareType = 2
        this.dataForm.startTime = this.rangeTime?this.rangeTime[0]:'';
        this.dataForm.endTime = this.rangeTime?this.rangeTime[1]:'';
        // 获取列表
        this.$http({
          url: this.$http.adornUrl("/sharestatistics/getBookShareStatisticslist"),
          method: "get",
          params: this.$http.adornParams(this.dataForm)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list;
            this.totalPage = data.page.totalCount;
          } else {
            this.dataList = [];
            this.totalPage = 0;
          }
          this.dataListLoading = false;
        });
        // 总揽
        this.$http({
          url: this.$http.adornUrl("/sharestatistics/getBookShareStatisticsCount"),
          method: "get",
          params: this.$http.adornParams(this.dataForm)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.ShareStatisticsVo = data.ShareStatisticsVo
          } else {
            this.$message.error(data.msg)
          }
        });
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getDataList();
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val;
        this.getDataList();
      },
      download() {
        this.downloading = true
        this.dataForm.page = this.pageIndex
        this.dataForm.limit = this.pageSize
        this.dataForm.shareType = 2
        this.dataForm.startTime = this.rangeTime?this.rangeTime[0]:'';
        this.dataForm.endTime = this.rangeTime?this.rangeTime[1]:'';
        this.$http({
          url: this.$http.adornUrl("/sharestatistics/shareStatistics/download"),
          method: "get",
          params: this.$http.adornParams(this.dataForm),
          headers: {
            'Content-Type': 'application/json; application/octet-stream'
          },
          responseType: 'arraybuffer'
        }).then(({ data }) => {
          this.downloading = false
          const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
          const downloadElement = document.createElement('a')
          const href = window.URL.createObjectURL(blob)
          downloadElement.href = href
          downloadElement.download = '书籍分享页统计.xls'
          document.body.appendChild(downloadElement)
          downloadElement.click()
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
        }).catch(() => {
          this.downloading = false
          this.$message.error('下载失败，请重新尝试～')
        });
      },
    }
  };
</script>
